<%@page import="com.fearless.entity.UserEntity"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link type="text/css" rel="stylesheet" href="layui/css/layui.css" />
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
	<%
	    UserEntity user = (UserEntity)session.getAttribute("userEntity");
	    if(user==null){
	    	response.sendRedirect("login.jsp");
	    }
	    %>
		<div class="layui-form-item" style="margin-top: 10px; margin-left: 10px;">
			<form class="layui-form" method="post" onsubmit="return false;">
				<label class="layui-form-mid">起止时间:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="begin" name="begin" placeholder="yyyy-MM-dd" class="layui-input"/>
				</div>
				
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width: 100px;">
				</div>
				
				<label class="layui-form-mid">截至时间:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="end" name="end" placeholder="yyyy-MM-dd" class="layui-input"/>
				</div>
				
				<label class="layui-form-mid">分类查找:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select name="nid" id=nid">
						<option value=" ">请选择分类</option>
						<c:forEach items="${newsTypeList }" var="newsType">
							<option value="${newsType.id }">${newsType.name }</option>
						</c:forEach>
						</select>
				</div>
				
				<label class="layui-form-mid">是否在首页显示:</label>
				<div class="layui-input-inline" style="width: 100px;">
					 <select name="showHome" id="showHome">
						<option value="">请选择</option>
						<option value="0">否</option>
						<option value="1">是</option>
						</select>
				</div>
				
				<div class="layui-input-inline" style="width: 100px;">
					<button class="layui-btn" id="search" data-type="reload">搜索</button>
				</div>
			</form>
		</div>
		
		<script type="text/html" id="headToolBar">
			<button class="layui-btn layui-btn-sm" lay-event="addNews">
				<i class="layui-icon layui-icon-add-1"></i>添加新闻
			</button>
		</script>
		
		<script type="text/html" id="rowToolBar">
			<button class="layui-btn layui-btn-sm" lay-event="updateNews">
				<i class="layui-icon layui-icon-edit"></i>
			</button>
			<button class="layui-btn layui-btn-sm" lay-event="deleteNews">
			<i class="layui-icon layui-icon-delete"></i>
			</button>
		</script>
		
		<table class="layui-hide" id="testTable" lay-filter="test"></table>
		
		<script>
			layui.use(['table','layer','form','util','laydate'],function(){
				var table= layui.table,$ = layui.$,layer = layui.layer,
				form = layui.form,laydate=layui.laydate;
				
				laydate.render({
					elem : '#begin', //指定元素     
					type : 'datetime',//定义控件类型年月日时分秒     
					format : 'yyyy-MM-dd HH:mm:ss'//定义日期格式 
				   }); 
				laydate.render({     
					elem : '#end', //指定元素     
					type : 'datetime',//定义控件类型年月日时分秒    
					format : 'yyyy-MM-dd HH:mm:ss'//定义日期格式 
				}); 
				var pdata;
				
				table.render({
					elem:'#testTable',//
					height:500,
					toolbar:'#headToolBar',
					url:"http://localhost:8080/fearless/NewsAdminServlet?req=newsList",
					method:'post',
					page:true,
					cols:[[
						{title:"id",field:"id",sort:true,width:100},
						{title:"新闻标题",field:"newsTitle"},
						{title:"新闻内容",field:"content",sort:true},
						{title:"分类id",field:"nid"},
						{title:"分类名字",field:"typeName"},
						{title:"是否在首页显示",field:"showHome",
							templet: function (d) {
				                if (d.showHome =='0'){
				                    return '否'
				                }else {
				                    return '是'
				                }
				            }
						},
						{title:"时间",field:"createTime"},
						{title:"操作",toolbar:"#rowToolBar"}
					]],
					id:'testTable',
					done:function(res,curr,count){
						console.log(res.data);
						pdata = res.data;
					}
				});
				// toolbar  顶部工具栏      tool 行内工具栏
				table.on('toolbar(test)',function(data){
					 console.log(data);
					 //  if  else     switch
					 if(data.event == "addNews"){
					 	//添加新用户
					 	layer.open({
			                    type: 2,
			                    title: '添加新闻',
			                    fix: false,
			                    maxmin: true,
			                    shadeClose: true,
			                    area: ['350px', '500px'],
			                    content: "newsAdd.jsp",
			                    success: function(layero, index){
			                    	// 添加这一步基本不需要
								  },
			                    end: function () { // 关掉弹出框后重新加载本页面
									//active["reload"].call(this);
									// 可以直接使用加载 根据渲染完定义的id
									table.reload('testTable');
			                    }
			                });
					 	
					 }else{
					 	layer.alert("其他按钮");
					 }
				});
				
				table.on('tool(test)',function(data){
					console.log(data);
					switch (data.event){
						case 'updateNews':
						    layer.open({
			                    type: 2,
			                    title: '修改新闻',
			                    fix: false,
			                    maxmin: true,
			                    shadeClose: true,
			                    area: ['350px', '500px'],
			                    content: "newsUpdate.jsp",
			                    success: function(layero, index){
			                    	// 或得弹出框页面的body，然后 向文本里面赋值
								     let body = layer.getChildFrame('body', index);
						             body.find("#newsId").val(data.data.id);
						             body.find("#newsTitle").val(data.data.newsTitle),
						             body.find("#newsContent").val(data.data.content),
						             body.find("#nid").val(data.data.nid),
						             body.find("#showHome").val(data.data.showHome),
						            layui.form.render();
								  },
								  // 如果表单页面没有按钮 用这里的按钮
//			                     btn: ['按钮一', '按钮二', '按钮三']
//								  ,yes: function(index, layero){
//								    //按钮【按钮一】的回调
//								    let body = layer.getChildFrame('body', index);
//						             body.find("#LoginName").val();   //通过class名进行获取数据
//						             body.find("#email").val(),
//						             console.log(body.find("#phone").val())
//								  }
//								  ,btn2: function(index, layero){
//								    //按钮【按钮二】的回调
//								    
//								    //return false 开启该代码可禁止点击该按钮关闭
//								  }
//								  ,btn3: function(index, layero){
//								    //按钮【按钮三】的回调
//								    
//								    //return false 开启该代码可禁止点击该按钮关闭
//								  }
//								  ,cancel: function(){ 
//								    //右上角关闭回调
//								    
//								    //return false 开启该代码可禁止点击该按钮关闭
//								  },
			                    end: function () { // 关掉弹出框后重新加载本页面
									//active["reload"].call(this);
									// 可以直接使用加载 根据渲染完定义的id
									table.reload('testTable');
			                    }
			                });
							break;
						case 'deleteNews':
						layer.confirm("确定要删除"+data.data.newsTitle+"吗？", function(index){
							//  index >= 1时是确定    取消index无值
							console.log(index);
							if(index >= 1){// 删除用户 
								    $.post(
									"http://localhost:8080/fearless/NewsAdminServlet?req=newsDelete",
									{
										"newsId":data.data.id
									},
									function(res){
									   //success: true，操作成功；false,操作失败 
									   if(res.success == true){
									   	 layer.alert("删除成功");
									   	 active["reload"].call(this);
									   }else{
									   	layer.alert("删除失败");
									   }
									},
									"json"
								  );
								  
							}
						  layer.close(index);//关掉弹出层
						});       
				
							break;
						default:
							break;
					}
				})
				
				
				active = {
					reload:function(){
						//拿到条件区域里文本的值
						var beginDate = $("#begin").val();
						var endDate = $("#end").val();
						var nid = $("#nid").val();
						var showHome = $("#showHome").val();
						//表格重载       1 找到渲染的id  2 请求参数
						table.reload('testTable',{
							where : {
								"beginDate":beginDate,
								"endDate":endDate,
								"nid":nid,
								"showHome":showHome,
							}
						})
					}
				};
				
				$("#search").on('click',function(){
					var type = $(this).data('type');
					console.log(type);	
					// 
					active[type]?active[type].call(this):"";
				});
			})
			
			
		</script>
		
		
	</body>
	
</html>
